<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div>
            <el-row :gutter="4">
              <el-form :inline="true" label-width="70px">
                <el-form-item label="标题:">
                  <el-input
                    placeholder="请输入标题"
                    v-model="searchDto.title"
                  ></el-input>
                </el-form-item>
                <el-form-item label="文件名:">
                  <el-input
                    v-model="searchDto.fileName"
                    placeholder="请输入文件名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="时间:">
                  <el-date-picker
                    v-model="value4"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="getPageData()"
                    >查询
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-s-open"
                    @click="clear()"
                    >重置
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table-content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                align="center"
                width="100"
                label="序号"
              ></el-table-column>
              <el-table-column
                label="标题"
                prop="title"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="流程名称"
                prop="flowName"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="文件名称"
                prop="fileName"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="所在步骤"
                prop="stepName"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="编辑人"
                prop="userName"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="创建时间"
                prop="createTime"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="版本"
                prop="version"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
            </page-table>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import Moment from "moment";

export default {
  created() {
    this.getPageData();
  },
  data() {
    return {
      value4: [],
      loading: false,
      searchDto: {
        pageIndex: "",
        pageSize: 10,
        title: "",
        flowName: "",
        fileName: "",
        instanceId: "",
        fileId: "",
        startTime: "",
        endTime: ""
      },
      pageData: {}
    };
  },
  methods: {
    //获取分页
    getPageData(val) {
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getWpsVersionPageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    //重置
    clear() {
      this.searchDto = {
        pageIndex: "",
        pageSize: 10,
        title: "",
        flowName: "",
        fileName: "",
        instanceId: "",
        fileId: "",
        startTime: "",
        endTime: ""
      };
      this.value4 = [];
      this.getPageData();
    }
  }
};
</script>
<style scoped></style>
